import React from 'react';
import {observer, inject} from 'mobx-react';
import {withRouter} from 'react-router-dom';
import {toJS} from 'mobx';
import {List, InputItem, Icon, Tools, Bubble, Select} from 'weaver-mobile';
import {RouteLayout} from 'weaver-mobile-page';

const Item = List.FormItem;
const ButtonGroup = RouteLayout.ButtonGroup;

@inject('accountSetting')
@withRouter
@observer
export default class AccountSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inteSwitch: '',
      sysId: '',
      homeUrl: '',
      openType: "",
    }
  }
    
  componentDidMount() {
    let params = Tools.getFrameParams();
    if(params) {
      const {inteSwitch, inteSysid, homeUrl, openType} = params;
      this.setState({
        sysId: inteSysid,
        inteSwitch,
        openType,
        homeUrl: decodeURIComponent(homeUrl)
      })
      this.props.accountSetting.getOutterPCAndAppUrl({sysid: inteSysid}, openType);
    }
  }

  componentWillUnmount() {
    this.setState({
      inteSwitch: '',
      sysId: '',
      homeUrl: '',
      openType: "",
    })
    this.props.accountSetting.clearStore();
  }
 
  componentWillMount() {
    this.setState({
      inteSwitch: '',
      sysId: '',
      homeUrl: '',
      openType: "",
    })
    this.props.accountSetting.clearStore();
  }
  
  render() {
    const {accountSetting: {paramObj, insertAccount, setState}} = this.props;
    const {sysId, inteSwitch, homeUrl, openType} = this.state;
    return (
      <div>
        <List>
          {Object.keys(toJS(paramObj)).map(key =>{ 
            if(key != "logintype") {
              return <Item
                key={key}
                line
                clear
                content={(<InputItem
                  value={toJS(paramObj)[key]}
                  placeholder="请输入"
                  onChange={(v) => {
                    let params = {...toJS(paramObj)};
                    params[key] = v;
                    setState({paramObj: params});
                  }}
                />)}
                label={key === "userName" ? "账号" : key === "passWord" ? "密码" : key}
                extra={[<Icon key="right" type="right" />]}
                requried
              ></Item>
            }else {
              return <Select
                key={"logintype"}
                value={'1'}
                label="访问类型"
                options={[
                  {
                    key: '1',
                    showname: '内网访问',
                  },
                  {
                    key: '2',
                    showname: '外网访问',
                  }
                ]}
                onChange={(key, showname) => {
                  let params = {...toJS(paramObj)};
                  params["logintype"] = key;
                  setState({paramObj: params});
                }}
              /> 
            }
          })}
        </List>
        <ButtonGroup data={[
          {
            key: 'save',
            text: '登录',
            onClick: () => {
              let keys = Object.keys(toJS(paramObj));
              for(let i = 0; i < keys.length; i ++) {
                if(!toJS(paramObj)[keys[i]]) {
                  Bubble.error('请填写完整', 1);
                  return;
                }
              }
              insertAccount(sysId, inteSwitch, homeUrl, openType);
            },
            type: 'primary',
          },
        ]} />
      </div>
    )
  }
}
